<template>
	<view class="container">
		<view class="top-section" :style="{ paddingTop: statusBarHeight }">
			<view class="nav d-flex px-4 a-center font-lg text-light" :style="{ height: navBarHeight }">
				<view class="iconfont icon-back" @click="backFn"></view>
				<view class="flex-1">{{ title }}</view>
			</view>
			<view class="steps"><step-bar :stepList="numList" :step="current"></step-bar></view>
		</view>
		<scroll-view class="middle-section" scroll-y="true">
			<view v-if="current == 1" class="u-p-l-54 u-p-r-54  ">
				<u-form :model="formData" ref="uForm">
					<view class="form">
						<u-form-item class="required" label="手机号" label-position="top" :border-bottom="false">
							<u-input border height="80" v-model="formData.mobile" placeholder="请输入您的手机号" />
						</u-form-item>
						<u-form-item class="required" label="验证码" label-position="top" :border-bottom="false">
							<u-input border height="80" v-model="formData.code" placeholder="请输入您的验证码" />
						</u-form-item>
						<view class="code">
							<button style="z-index: 1;" class="primaryMiniBnt" @click="showSliderVerifyFn">
								{{ tips }}
							</button>
							<u-toast ref="uToast"></u-toast>
							<u-verification-code
								:seconds="seconds"
								ref="uCode"
								@change="codeChange"
							></u-verification-code>
						</view>
					</view>
				</u-form>
			</view>

			<view v-if="current == 2" class="u-p-l-54 u-p-r-54  ">
				<u-form :model="nextData" ref="uForm">
					<view class="form">
						<u-form-item class="required" label="密码" label-position="top" :border-bottom="false">
							<u-input
								border
								height="80"
								type="password"
								v-model="nextData.pwd"
								placeholder="请输入您的密码"
							/>
						</u-form-item>
						<u-form-item class="required" label="确认密码" label-position="top" :border-bottom="false">
							<u-input
								border
								height="80"
								type="password"
								v-model="nextData.confirmPwd"
								placeholder="请确认您的密码"
							/>
						</u-form-item>
					</view>
				</u-form>
			</view>
		</scroll-view>
		<view class="bottom-section">
			<button v-if="current == 1" class="primaryBnt" @click="hanglgNextFn">下一步</button>
			<button v-if="current == 2" class="primaryBnt" @click="hanglgSetpasswordFn">设置密码</button>
		</view>
		<verify
			@success="verifySuccessfullyFn"
			:mode="'pop'"
			:captchaType="'blockPuzzle'"
			:imgSize="{ width: '300px', height: '155px' }"
			ref="verify"
		></verify>
	</view>
</template>

<script>
import verify from '@/userPages/components/verify/verify';
import { isValidPhoneNumber } from '@/utils/tool.js';
import stepBar from '@/userPages/components/stepBar/stepBar.vue';
import { sendVerifyMobileSms, forgotPassword } from '@/api/apis.js';
import { encrypt } from '@/utils/encrypFile';
export default {
	components: {
		verify,
		stepBar
	},
	data() {
		return {
			title: '忘记密码',
			statusBarHeight: '',
			navBarHeight: '',
			numList: [
				{
					name: '验证手机号码',
					id: '1'
				},
				{
					name: '修改密码',
					id: '2'
				}
			],
			current: 1,
			seconds: 10,
			tips: '',
			formData: {
				mobile: '',
				code: ''
			},
			nextData: {
				pwd: '',
				confirmPwd: ''
			}
		};
	},

	onLoad() {
		/*#ifdef MP*/
		let that = this;
		uni.getSystemInfo({
			success: function(info) {
				// 屏幕高度
				let screenHeight = info.screenHeight;
				// 屏幕宽度
				let screenWidth = info.screenWidth;
				// 胶囊高度
				//状态栏高度
				that.statusBarHeight = info.statusBarHeight * 2 + 'rpx';
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				let navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - screenHeight;
				that.navBarHeight = navBarHeight + screenHeight - info.statusBarHeight + 'rpx';
			}
		});
		/*#endif*/
		if (this.$Route.query.title) {
			this.title = this.$Route.query.title;
		}
	},
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	},
	methods: {
		//显示图形验证码
		showSliderVerifyFn() {
			if (this.queryCodeValidRuleFn()) {
				this.$refs.verify.show();
			}
		},
		//验证码校验
		queryCodeValidRuleFn() {
			if (!isValidPhoneNumber(this.formData.mobile)) {
				this.$u.toast('请输入正确手机号码');
				return false;
			}
			return true;
		},
		//验证成功
		verifySuccessfullyFn(e) {
			this.getCodeFn();
			this.$refs.verify.close();
		},
		//下一步
		hanglgNextFn() {
			if (this.validUserRuleFn()) {
				this.current = this.current + 1;
			}
		},
		//验证用户信息
		validUserRuleFn() {
			if (this.formData.mobile == '') {
				this.$u.toast('请输入您的手机号码');
				return false;
			}
			if (this.formData.code == '') {
				this.$u.toast('请输入您的验证码');
				return false;
			}
			return true;
		},
		codeChange(text) {
			this.tips = text;
		},
		//获取验证码
		getCodeFn() {
			if (this.$refs.uCode.canGetCode) {
				sendVerifyMobileSms({
					mobile: this.formData.mobile
				}).then(res => {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					if (res.code == 10000) {
						setTimeout(() => {
							uni.hideLoading();
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}, 2000);
					} else {
						this.$u.toast(res.msg);
					}
				});
			} else {
				this.$u.toast('验证码已发送，请稍后再试');
			}
		},
		//设置密码
		hanglgSetpasswordFn() {
			if (this.validPwdRuleFn()) {
				forgotPassword({
					mobile: this.formData.mobile,
					pwd: encrypt(`${this.$u.trim(this.nextData.pwd)}`)
				}).then(res => {
					if (res.code == 10000) {
						this.$Router.replaceAll({
							path: '/userPages/pages/login/login'
						});
					} else {
						this.$u.toast(res.msg);
					}
				});
			}
		},

		//验证用户信息
		validPwdRuleFn() {
			if (this.nextData.pwd == '') {
				this.$u.toast('请输入您的密码');
				return false;
			}
			if (this.nextData.code == '') {
				this.$u.toast('请确认您的密码');
				return false;
			}
			if (this.nextData.pwd != this.nextData.confirmPwd) {
				this.$u.toast('请保证两次输入的密码一致');
				return false;
			}
			return true;
		},
		backFn() {
			this.$Router.back();
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

.top-section {
	height: 570rpx;
	text-align: center;
	background-image: url($custom-bg-img-url+'headBg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	z-index: 1;
	/* #ifdef  H5 */
	.nav {
		padding-top: 50rpx;
	}
	/* #endif */
	.steps {
		width: 500rpx;
		margin: 50rpx auto;
	}
}

.middle-section {
	flex: 1;
	overflow-y: auto;
	background-color: #fff;
	margin-top: -25%;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	position: relative;
	z-index: 2;
	// padding-bottom: 50px;
	.form {
		position: relative;
		.code {
			position: absolute;
			bottom: 26rpx;
			right: 12rpx;
			::v-deep .u-size-medium {
				padding: 0 20rpx;
				height: 64rpx !important;
				line-height: 64rpx !important;
			}
		}
	}
}

.bottom-section {
	// flex: 0 0 50px;
	height: 75px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* 如果中间区域内容过多，可能会溢出到底部区域上方，
     这时可以通过设置底部区域的z-index来确保它显示在最上层。 */
	z-index: 3;
}
</style>
